import {
	Primary,
	Controls,
	Stories,
	Meta,
	ArgTypes,
	Source,
} from '@storybook/addon-docs/blocks';
import Dialog from './Dialog.vue';
import * as DialogStories from './Dialog.stories.js';

<Meta of={DialogStories} />

# Dialog

Dialog purpose is to display simple feedback like success and error messages. Or request confirmation for example before deleting content.

## Usage

Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. Check out the props description for details.

## Styling

The style of the modal can be changed by passing the prop `modalStyle`. It accepts the following values:

- **`primary`**: A modal style that uses the primary color scheme. Use this for informational dialogs or confirmation modals that don't involve negative actions. This is the default style used when the modal is invoked via the composable API for the Dialog component.
- **`negative`**: Indicates a negative state, typically for error messages or alerts. It should also be used for confirming negative actions like deleting or removing items that may be irreversible.
- **`success`**: Represents a positive state, often used for success notifications.
- **` basic`**: The standard modal style, which has no special border styling. This style is applied by default in the legacy PHP implementation of the Dialog component, if no value is specified.

## Customizing Dialog Actions

The dialog prop actions (e.g., an array[] of buttons like "OK" and "Cancel") can be overridden by passing a component to `bodyComponent` that uses the `DialogBody` wrapper.

This wrapper provides an `#actions` slot where you can define more complex logic, such as:

- Validation before closing the modal
- Conditional button states

```vue
<DialogBody>
	<p>Are you sure you want to delete?</p>
	<div class="relative mt-6">
		<span>Please type "<b>Confirm</b>" to continue:</span>
		<FieldText  :value="inputValue" @input="inputValue = $event.target.value" />
	</div>
	<template #actions>
		<PkpButton @click="confirmInput">Confirm</PkpButton>
		<PkpButton @click="closeModal" :is-warnable="true">Cancel</PkpButton>
	</template>
</DialogBody>
```

## Accessibility

To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.

### Defining Modal Component

<ArgTypes of={Dialog} />

<Stories />
